<template>
	<view id="container">
		<logo position="center"></logo>
		<!-- <view style="display: flex;align-items: center;height:100%;width:100%;position:absolute;top:0;"> -->
		<view id="login">
			<view id="login-header">
				<span class="border-bottom">
					<span class="bold">用户登录</span>|<span>Login</span>
				</span>
			</view>
			<view id="login-header-bottom"></view>
			<view id="login-body">
				<form @submit="submit">
					<input class="uni-input input-text" v-model="formData.username" placeholder="用户名"/>
					<input class="uni-input input-text" v-model="formData.password" type="password" placeholder="用户密码" style="margin-top:30rpx;"/>
					<button type="warn" style="margin-top:30rpx;" @click="submit">登录</button>
				</form>
			</view>
		</view>
		<!-- </view> -->
		<!-- <view id="login">
			<view id="login-title"><h2>竞赛登录</h2></view>
			<view id="form">
				<uni-forms ref="form" :modelValue="formData">
					<uni-forms-item label="用户名" required>
						<uni-easyinput type="text" v-model="formData.username" placeholder="请输入用户名" />
					</uni-forms-item>
					<uni-forms-item label="密码" required>
						<uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" />
					</uni-forms-item>
				</uni-forms>
				<button type="primary" @click="submit">登 录</button>
			</view>
		</view> -->
		<view id="footer">贵州乌江水电开发有限责任公司</view>
	</view>
</template>

<script>
	import logo from "@/component/common/logo.vue";
	export default {
		components:{logo},
		data() {
			return {
				formData: {
					username:'',
					password:''
				}
			}
		},
		onLoad() {
			const data=this.$user.getAccount();
			if(data!=''){
				this.login(data);
			}
		},
		methods: {
			submit(){
				this.login(this.formData);
			},
			login(data){
				this.$request({
					url:"login",
					method:"post",
					data:data
				}).then(res=>{
					this.$user.setToken(res.token);
					this.$user.setAccount(data);
					this.$request({
						url:"getInfo",
					}).then(res=>{
						this.$user.setUser(res.user);
						uni.redirectTo({
							url: '/pages/index/index'
						});
					})
					
				})
			}
		}
	}
</script>

<style scoped>
	#container {
		background-image: url("@/static/img/login-bg.jpg");
	}
	#login {
		width: 50%;
		margin: 0 auto;
		background-color: #fafafa;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
	}
	#login #login-header{padding:50rpx 0 50rpx 100rpx;letter-spacing: 5rpx;}
	#login #login-header-bottom{background-color: #ededed;width:100%;height:25rpx;}
	#login #login-body{padding:50rpx 100rpx;}
	.input-text{height: 100rpx;background-color: #eeeeee;padding:0 20rpx;}
</style>